<template>
	<view class="bg-gray">
		<view class="wrapper width">
			<carousel :res="carouselImage" class="bgshare"   height='360' />
			<u-notice-bar
				style="width: 100%; margin-top:20px;"
				mode="vertical"
				fontSize='24'
				bgColor='#E5F6E6'
				color='#333333'
				:moreIcon='true'
				volumeSize='40'
				:list="notSupportFreightGoodsList"
			></u-notice-bar>
			<view class="days">
				<scroll-view class="dayslist" 
				    scroll-x="true" 
					scroll-left="0"
				>
					<view 
						:class="indexTab == index ? 'daycur day' : 'day'" 
						v-for="(item,index) in date" :key='index'
						@click="chooseTab(index)"
					>
						<view class="share">{{parseInt(index+1)}}</view>
						{{item}}
					</view>
				</scroll-view>
			</view>
			<view class="bg-white boxbottom">
				<view class="tabs flex-row-between">
					<view 
						@click="tabcurrent = 0"
						class="tabitem" :class="tabcurrent == 0 ? 'tabitemcur' : ''">一日三餐</view>
					<view class="tabitem" 
					@click="tabcurrent = 1"
					:class="tabcurrent == 1 ? 'tabitemcur' : ''">小碗菜</view>
				</view>
				<view v-show="tabcurrent == 0">
					<view class="flex-row-start allchoose" @click="chooseAll(checkedAll)">
						<u-icon 
							:name="checkedAll ? 'checkmark-circle-fill':'minus-circle-fill'" 
							color="#499C43" 
							size="48">
						</u-icon> 				
						<view class="chosefont">一键全选</view>
					</view>
					<view class="listsp">
						<u-checkbox-group @change="checkboxGroupChange">
							<view>
								<view class="radio-view" v-for="(item, index) in list" :key="index">
									<u-checkbox
										shape = 'circle'
										:active-color="lightColor"
										label-size="25"
										:value="item.checked"
										v-model="item.checked"
										:name="item.name"
									>
										<view  class="listitem flex-row-between">
											<image :src="item.img" class="bg" mode="widthFix"></image>
											<view class="info">
												<view class="title color2 font14 bold">{{item.name}}</view>
												<view class="jieshao font12 color9">
													{{item.des}}…
												</view>
												<view class="flex-row-between">
													<view class="price yellow font16">￥ 0</view>
												</view>
											</view>
										</view>
									</u-checkbox>
								</view>
							</view>
						</u-checkbox-group>
					</view>
				</view>
				<!--<u-divider>小碗菜</u-divider>
				 <view class="flex-row-start allchoose" @click="chooseAllX(checkedAll)">
					<u-icon 
						:name="checkedAll ? 'checkmark-circle-fill':'minus-circle-fill'" 
						color="#499C43" 
						size="48">
					</u-icon> 				
					<view class="chosefont">一键全选小碗菜</view>
				</view> -->
				<view class="listsp" v-show="tabcurrent == 1">
					<u-checkbox-group @change="checkboxGroupChange">
						<view>
							<view class="radio-view" v-for="(item, index) in listxiaowan" :key="index">
								<u-checkbox
									shape = 'circle'
									:active-color="lightColor"
									label-size="25"
									:value="item.checked"
									v-model="item.checked"
									:name="item.name"
								>
									<view  class="listitem flex-row-between">
										<image :src="item.img" class="bg" mode="widthFix"></image>
										<view class="info">
											<view class="title color2 font14 bold">{{item.name}}</view>
											<view class="jieshao font12 color9">
												{{item.des}}…
											</view>
											<view class="flex-row-between">
												<view class="price yellow font16">￥0</view>
											</view>
										</view>
									</view>
								</u-checkbox>
							</view>
						</view>
					</u-checkbox-group>
				</view>
			</view>
		</view>
		<view class="submitbtn flex-row-between">
			<view class="price flex-row-start">
				<!-- 待支付
				<view class="yellow"  v-if='total'>¥<text class="font18">{{ total }}</text></view> -->
			</view>
			<view class="yudin" @click="submit">确认支付</view>
		</view>
	</view>
</template>

<script>
import { getListFun,getDailyCateringCon, placeOrder } from "@/api/food";
import tpl_banner from "@/pages/tabbar/roperty/template/tpl_banner"; //导航栏模块
import storage from "@/utils/storage.js"; //缓存
import { getTime } from "@/utils/filters.js"; //缓存
export default {
	data() {
		return {
			tabcurrent: 0,
			date:getTime(7),
			//日期tab索引
			indexTab:0,
			hasChoose:[],
			//轮播图
			carouselImage:[
				{ name:'https://www.haopengsong.xyz/static/food.jpg'}
			],
			radioMarketId:'',
			checkedAll:false,
			//餐食选择列表
			list: [],
			listxiaowan:[
				{
					img:'https://www.haopengsong.xyz/static/xiaowan1.png',
					name:'红烧肉',
					des:'一道著名的大众菜肴，各大菜系都有自己特色的红烧肉。其以五花肉为制作主料，也可用猪后腿代替，最好选用肥瘦相间的三层肉来做，锅具以砂锅为主',
					checked: false,
					price:0,
				},
				{
					img:'https://www.haopengsong.xyz/static/xiaowan2.png',
					name:'板栗烧鸡',
					des:'板栗烧鸡是一道美味且营养丰富的家常菜，结合了板栗的香甜和鸡肉的鲜美，口感丰富',
					checked: false,
					price:0,
				},
				{
					img:'https://www.haopengsong.xyz/static/xiaowan3.png',
					name:'蒸蛋',
					des:'水蒸蛋是传统美食之一，是一道老少皆宜的家常食谱，南方人称之为“水蒸蛋”，北方人则称为“鸡蛋羹”。山东人和东北人多称其为“蒸蛋糕儿”。虽然“蒸蛋”看起来简单，不过还是有很多人做得不成功，',
					checked: false,
					price:0,
				}
			],
			total:null,//价格
			lightColor:'#499C43',
			//通知轮播
			notSupportFreightGoodsList:['少量多样','均衡配餐'],
		};
	},
	components: {
		carousel: tpl_banner
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		this.getDailyCateringConFun()
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		getDailyCateringConFun(){
			 getDailyCateringCon({ caterDate:'2025-02-12'}).then(res=>{
				 this.list = [{
					name: '早餐',
					des:res.breakfastIntroduce,
					checked: false,
					price:res.breakfastPrice,
					img:res.breakfastImage
				},
				{
					name: '午餐',
					des:res.lunchIntroduce,
					checked: false,
					price:res.lunchPrice,
					img:res.lunchImage
				},
				{
					name: '晚餐',
					des:res.dinnerIntroduce,
					checked: false,
					price:res.dinnerPrice,
					img:res.dinnerImage
				}]
			 })
		},
		/**
		 * @param {界面跳转url} res
		 */
		jump(res){
			uni.navigateTo({
				url: res
			});
		},
		/**
		 * 一键全选
		 */
		chooseAll(checkedAll) {
			this.list.map(val => {
				val.checked = checkedAll ? false : true;
			})
			this.checkedAll = !this.checkedAll
		},
		/**
		 * @param {跳转索引} index
		 */
		chooseTab(index){
			this.indexTab = index
			this.list.map(val => {
				val.checked = false
			})
			this.list = []
			this.getDailyCateringConFun()
			this.total = 0
			this.hasChoose = []
		},
		checkboxGroupChange(res,data){
			this.hasChoose = res
			let numbers = []
			this.list.map(i=>{
				this.hasChoose.map(v=>{
					if(v== i.name){
						numbers.push(i.price)
					}
				})
			})
			console.log(res)
			this.total = numbers.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue), 0);
		},
		selectMode(res){
			console.log(res)
		},
		//确定提交
		submit(){
			if(this.hasChoose.length == 0){
				uni.showToast({
					title: "你还未选择餐食，请选择",
					icon: "none",
					duration: 1500,
				});
				return false
			}
			let data = {
				caterDate:this.date[this.indexTab],
				breakfast:this.hasChoose.indexOf('早餐') > -1 ? 0 : 1,
				lunch:this.hasChoose.indexOf('午餐') > -1 ? 0 : 1,
				dinner:this.hasChoose.indexOf('晚餐') > -1 ? 0 : 1,
			}
			 placeOrder(data).then(res=>{
				 uni.showToast({
				 	title: "预定成功,请在订单里查看信息！",
				 	icon: "none",
				 	duration: 1500,
				 });
				 setTimeout(function () {
					 uni.navigateTo({
					 	url:'/pages/myorder/index'
					 })
				 },2000)
			 })
		}
	}
};
</script>

<style scoped lang="scss">
	.tabs{
		background: rgb(229, 246, 230);
		border-radius: 20px;
		padding: 5px 6px;
		margin-bottom: 15px;
		letter-spacing: 2px;
		.tabitem{
			width: 50%;
			text-align: center;
			height: 30px;
			line-height: 30px;
			border-radius: 30px;
		}
		.tabitemcur{
			background-color: #fff;
			color:#499C43;
			font-weight: 700;
		}
	}
	.bg-gray{
		padding-bottom: 70px;
	}
	.dayslist{
		width: 100%;
		white-space: nowrap;
		margin: 15px auto;
		.day{
			width: 93px;
			height: 40px;
			background-color: #fff;
			display: inline-block;
			border-radius: 12px;
			text-align: center;
			color: #2F3556;
			margin-right: 12px;
			line-height: 40px;
			position: relative;
			.share{
				width: 24px;
				height: 16px;
				border-radius: 0px  12px  0px  12px;
				background-color: #FF9100;
				position: absolute;
				line-height: 16px;
				text-align: center;
				color: #fff;
				font-size: 12px;
				right: 0;
				top: 0;
			}
		}
		.daycur{
			background-color: #499C43;
			color: #fff;
			.share{
				display: none;
			}
		}
	}
	.listitem{
		margin-bottom: 15px;
		.bg{
			width: 95px;
			height: 95px;
		}
		.info{
			width: 60%;
		}
	}
	.boxbottom{
		border-radius: 12px;
		padding: 12px;
	}
	.jieshao{
		height: 44px;
		line-height: 22px;
		display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: normal;
	}
	.listsp{
		margin-top: 20px;
		padding-bottom: 20px;
	}
	.wancai{
		margin-top: 10px;
	}
	.chosefont{
		margin-left: 10px;
	}
	.submitbtn{
		.yellow{
			padding: 0 5px 0 10px;
		}
		width: 100%;
		position: fixed;
		bottom: 0px;
		left:0;
		background-color: #fff;
		box-shadow: 0px -2px 0px 1px #EEEEEE;
		padding: 8px 10px;
		.yudin{
			width: 124px;
			height: 40px;
			background-color: #499C43;
			text-align: center;
			line-height: 40px;
			color:#fff;
			border-radius: 40px;
			font-size: 16px;
		}
	}
</style>